<template>
    <div class="result-container">
    <div class="title-wrap">
      <h2 class="title" :keywords="(keywords = $route.query.q)">{{ $route.query.q }}</h2>
      <!-- <h2 class="title">{{ keywords }}</h2> -->
      <span class="sub-title">找到{{ count }}个结果</span>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" v-for="(item, index) in songs" :key="index">
              <td>{{ index + 1 }}</td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <!-- 名称 -->
                    <span @dblclick="play(item.id)">{{ item.name }}</span>
                    <!-- mv图标 -->
                    <span v-if="item.mvid !== 0" class="el-icon-video-play icon-mv" @click.stop="toMv(item.mvid)"></span>
                  </div>
                  <!-- 二级标题 -->
                  <span v-if="item.alias.length !== 0">{{ item.alias[0] }}</span>
                </div>
              </td>
              <td>{{ item.artists[0].name }}</td>
              <td>{{ item.album.name }}</td>
              <td>{{ item.duration }}</td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>

      <el-tab-pane label="歌单" name="lists">
        <div class="items">
          <div class="item" v-for="(item, index) in playlists" :key="index" @click="toPlaylist(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount  }}</span>
              </div>
              <img :src="item.coverImgUrl+'?param=200y200'" alt="" />
              <span class="el-icon-video-play icon-play"></span>
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="MV" name="mv">
        <div class="items mv">
          <div class="item" v-for="(item, index) in mvs" :key="index" @click="toMv(item.id)">
            <div class="img-wrap">
              <!-- 封面 -->
              <img :src="item.cover+'?param=250y150'" alt="" />
              <span class="el-icon-video-play icon-play"></span>
              <div class="num-wrap">
                <div class="el-icon-video-play icon-play"></div>
                <!-- 播放次数 -->
                <div class="num">{{ item.playCount  }}</div>
              </div>
              <span class="time">{{ item.duration }}</span>
            </div>
            <div class="info-wrap">
              <!-- mv名 -->
              <div class="name">{{ item.name }}</div>
              <!-- 歌手名 -->
              <div class="singer">{{ item.artistName }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页器 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total" :current-page="page" :page-size="pageSize">
    </el-pagination>
  </div>
</template>

<script>
import { playMusic, search } from '../api/index'
export default {
    data(){
        return{
             // 总条数
            total: 0,
            // 页码
            page: 1,
            pageSize: 10,
            keywords: '',
            activeIndex: 'songs',
            songs: [],//查询歌曲
            count: 0,
            playlists: [],//歌单的数据
            mvs: [],//mv的数据
            songId: 0,
            type: 1,
        }
    },
    created(){
     this.serachValue()
    },
    methods:{
      serachValue(){
        let type = this.type
        search({
          keywords:this.$route.query.q,
          type:1,
          limit:10
        }).then(res => {
            console.log(res)
            this.songs = res.result.songs
            this.count = res.result.songCount
            // 计算歌曲时间
            for (let i=0;i<this.songs.length;i++){
                let min = parseInt(this.songs[i].duration/1000/60)
                let sec =  parseInt(this.songs[i].duration/1000%60)
                if( min<10 ){
                    min = '0' + min
                }
                if(sec <10 ){
                    sec = '0' + sec
                }
                this.songs[i].duration = `${min}:${sec}`
           }
        })
      },
      play(id){
            playMusic({
                id
            }).then(res => {
                 let url = res.data[0].url
            // 设置给父组件的播放地址
                 this.$parent.musicUrl = url
            })
        },
      // 跳转到详情页
      toPlaylist(id){
       console.log(id)
       this.$router.push('/playlist?q='+id)
      },
      // 跳转到视频详情页
      toMv(id){
       this.$router.push(`/mv?q=${id}`)
      },
      handleCurrentChange(val){
          this.page = val
      },
      searchMucis(type, limit) {
        search({
          keywords:this.$route.query.q,
              type,
              limit
        }).then(res => {
            if(type == 1){
            this.songs = res.result.songs
            this.count = res.result.songCount
            // 计算歌曲时间
            for (let i=0;i<this.songs.length;i++){
                let min = parseInt(this.songs[i].duration/1000/60)
                let sec =  parseInt(this.songs[i].duration/1000%60)
                if( min<10 ){
                    min = '0' + min
                }
                if(sec <10 ){
                    sec = '0' + sec
                }
                this.songs[i].duration = `${min}:${sec}`
            }
           } else if(type == 1000){
            //  歌单的逻辑
            this.playlists = res.result.playlists
            // 总数
            this.count = res.result.playlistCount
            // 处理播放次数
            for (let i=0; i< this.playlists.length;i++){
              if(this.playlists[i].playCount > 10000) {
                this.playlists[i].playCount = parseInt(this.playlists[i].playCount/10000) + '万'
              }
            }
           }else if(type == 1004){
             // mv的逻辑
             this.mvs = res.result.mvs
            //  总数
            this.count = res.result.mvCount
            // 处理次数
            for (let i=0;i<this.mvs.length;i++){
              let min = parseInt(this.mvs[i].duration/1000/60)
              let sec = parseInt(this.mvs[i].duration/1000%60)
              if(min<10){
                min = '0' + min
              }
              if (sec<10){
                sec = '0' + sec
              }
              this.mvs[i].duration = min + ':' + sec

              // 播放次数
              if(this.mvs[i].playCount>100000){
                this.mvs[i].playCount = parseInt(this.mvs[i].playCount/10000) + '万'
              }
            }
           }
        })
      }
    },
    watch:{
      // tab栏切换监听
      activeIndex(){
           let type = 1
          //  获取个数
          let limit = 10
        switch(this.activeIndex){
          case 'songs':
            type = 1;
            limit = 10;
            break;
          case 'lists':
            type = 1000;
            break;
          case 'mv':
            type = 1004;
            limit = 8;
            break;
        }
       this.searchMucis(type, limit)
      },

    }
}
</script>

<style scoped lang="scss">
.result-container {
    .title-wrap {
        display: flex;
        align-items: flex-end;
        margin-bottom: 30px;
        .title {
            margin-right: 10px;
        }
        .sub-title {
            font-size: 15px;
            color: #bebebe;
        }
    }
    .el-tabs__item {
        font-size: 18px;
    }
    .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item {
            width: 200px;
            cursor: pointer;
            margin-right: 20px;
            margin-bottom: 20px;
            .img-wrap {
                width: 100%;
                position: relative;
                & > .icon-play {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 40px;
                    height: 40px;
                    color: #dd6d60;
                    font-size: 20px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(255, 255, 255, 0.8);
                    opacity: 0;
                    &::before {
                        transform: translateX(1px);
                    }
                }
                &:hover {
                    & > .icon-play {
                        opacity: 1;
                    }
                }
                img {
                    width: 100%;
                    border-radius: 5px;
                }
                .num-wrap {
                    position: absolute;
                    color: white;
                    top: 0;
                    right: 0;
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    padding-right: 5px;
                    padding-top: 2px;
                    .icon-play {
                        font-size: 12px;
                        display: flex;
                        align-items: center;
                        margin-right: 5px;
                    }
                }
                .time {
                    position: absolute;
                    bottom: 5px;
                    right: 5px;
                    color: white;
                    font-size: 15px;
                }
            }
            .name {
                font-size: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .singer {
                font-size: 14px;
                color: #c5c5c5;
            }
        }
        &.mv {
            .item {
                width: 250px;
            }
        }
    }
}
.result-container .el-table td,
.result-container .el-table th.is-leaf {
    border-bottom: none;
}

</style>